<style>
    .layui-form-label{
        width: 120px!important;
    }
</style>
<link rel="stylesheet" href="/js/layui/css/layui.css">
<div style="margin: 5% 5%;  ">
    <form class="layui-form" action="" lay-filter="example">

        <div class="layui-form-item ">

            <div class="layui-inline">
                <label class="layui-form-label">主题名称:</label>
                <div class="layui-input-inline">
                    <input type="text"  name="themeName" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
        </div>

        <!--<div class="layui-form-item ">-->
            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">所属分组:</label>-->
                <!--<div class="layui-input-inline">-->
                    <!--&lt;!&ndash;<input type="text"  name="themeGroup" autocomplete="off" class="layui-input" value="">&ndash;&gt;-->
                    <!--<select name="themeGroup">-->

                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item " style="display: none;">
            <div class="layui-inline">
                <label class="layui-form-label">所属站点:</label>
                <div class="layui-input-inline">
                    <input type="text"  name="themeStation" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
        </div>

        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">主题图片:</label>
                <div class="layui-input-inline">
                    <img id="headImg" src="" width="100px" height="100px">
                    <!--<input type="text" id="headImg"  name="themeGroup" autocomplete="off" class="layui-input" value="">-->
                </div>
            </div>
        </div>

        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">主题状态:</label>
                <div class="layui-input-inline">
                    <select name="themeStatus" >
                        <option value="启用" >启用</option>
                        <option value="禁用" >禁用</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item " style="display: none;">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="themeImage" class="layui-input" value="">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" id="btnAdd" lay-submit="" lay-filter="demo1">新增</button>
                <button type="submit" class="layui-btn" id="btnQuxiao" lay-submit="" lay-filter="btnQuxiao">取消</button>
            </div>
        </div>

    </form>
</div>
<!--<script src="js/jquery-1.12.4.js"></script>-->
<!--<script src="../../layui.js"></script>-->

<script  src="/js/layui/layui.all.js"></script>
<script>

    var fileName = null;
    $=layui.$;

    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload;

        //文件上传
        // var upload = layui.upload;

        upload.render({
            elem:'#headImg',
            method: 'post',
            url: "/admin/fileinfo/upload/image",
            choose:function(obj)
            {
                fileName = null;
                //预览
                obj.preview(function(index, file, result){
                    //$("#headImg").attr('src',result);
                    document.getElementById("headImg").src = result;
                });
            },
            done:function(res, index, upload) //上传完成
            {
                fileName = res.data; //传回来的新的文件名
                $("input[name=themeImage]").attr("value",fileName);
            }

        });

        form.on('submit(btnQuxiao)',function (data) {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.location.reload();
            parent.layer.close(index)
        })

        form.on('submit(demo1)',function (data) {

            console.log(data.field)

            $.ajax({
                url: "/admin/theme/add/themeAdmin",
                type: 'POST',
                dataType: "JSON",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(data.field),
                beforeSend: function () {
                    this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
                },
                success: function (res) {

                    if (res.code == 500) {
                        layer.msg("新增失败\t"+res.msg, {icon: 5,time: 1000});//失败的表情
                        return;
                    } else if (res.code == 200) {
                        layer.msg("新增成功", {
                            icon: 6,//成功的表情
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            location.reload();
                        });
                    }
                },
                complete: function () {
                    layer.close(this.layerIndex);
                },
            });
            return false;//阻止表单跳转
        });

    });

    /**
     * 获取当前的站点所有分组列表
     */
    // $.ajax({
    //     type: 'GET',
    //     url: '/admin/group/stationGroup',
    //     success: function (data) {
    //         $.each(data.data, function (key, val) {
    //             console.log(val)
    //             var option1 = $("<option>").val(val.groupId).text(val.groupName);
    //             $("select[name='themeGroup']").append(option1);
    //         });
    //         layui.form.render('select');
    //     }
    // });

    function GetRequest() {
        var url = decodeURI(location.search); //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    var json=GetRequest();
    $("input[name='themeStation']").attr("value",json.id)

</script>